<template>
  <view>
    <view class="tel_content">
      <view class="tel_text">
        <text>本单报名手机号：</text>
        <text class="tel">{{ tel || '请绑定美团手机号' }}</text>
      </view>
      <view @click="openPop" style="display: flex;align-items: center;">
        <image src="https://lsz.lszbg.com/imgs/guanfan/detail/edit.png"></image>
        <text class="edit">{{ tel ? '修改' : '去绑定'}}</text>
      </view>
    </view>
    <!--修改美团关联手机号-->
    <u-popup v-model="phonePop" mode="center"  border-radius="20" @close="close" width="80%">
      <view class="tel_box">
        <view class="tel_title">修改美团账号手机号</view>
        <u-line style="color: #999999;"></u-line>
        <view class="desc_text">
          <text style="color: #FF3E00;font-size: 26rpx">新手机号需与美团绑定手机号一致</text>
        </view>
        <view style="margin-left: 30rpx;margin-top: 10rpx;font-size: 28rpx">手机号</view>
        <view class="input_name">
          <u-input border="none"
                   class="inputWidth"
                   type="number"
                   clearable
                   :customStyle="{'border-radius': 0,padding:'0rpx'}"
                   placeholder="请输入手机号" v-model="tel"/>
        </view>
        <view class="tip" style="position: relative">
          <text>您也可以前往我的-设置-关联美团手机号进行修改。</text>
          <text style="color: #ff7400;" @click="toMTSetting">点击查看美团绑定的手机号</text>
        </view>
        <view class="btns_con">
          <button class="zbbm" @click="closePop">取消修改</button>
          <button class="submit" @click="submitTel(0)">确认修改</button>
        </view>
      </view>
    </u-popup>
    <!--关联美团手机号-->
    <u-popup v-model="showBDTel" mode="center" border-radius="20" @close="close" width="80%">
      <view class="tel_box">
        <view class="content_boxs">
          <view class="know_t">关联美团手机号</view>
          <view class="desc_text">
            请填写
            <text style="color: #FF3E00">美团登录账号绑定的手机号码，</text>
            用于核对美团 订单信息，填写错误将无法获得美团订单返利，无法访问官返商家列表。
          </view>
          <view class="input_name">
            <u-input border="none"
                     class="inputWidth"
                     type="number"
                     clearable
                     :customStyle="{background:'#F6F6F6','border-radius': 0,padding:'10rpx 20rpx'}"
                     placeholder="请输入手机号" v-model="tel"/>
          </view>
          <view class="tip">
            绑定成功后，您可以前往我的-设置-美团授权手机号 进行修改，也可以在当前页面修改。
          </view>
          <view class="btns_con">
            <view style="flex: 1"></view>
            <button class="zbbm" @click="closePop">暂不绑定</button>
            <button class="submit" @click="submitTel(1)">确认绑定</button>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>
<script>

export default {
  name: "gfphone",
  props: {
    isMTPhone: {
      type: String,
      default: false
    },
  },
  data() {
    return {
      phonePop: false,
      showBDTel: false,
      tel: '',
      useUser: '',
    }
  },
  mounted() {
    let userinfo = uni.getStorageSync('userinfo');
    console.log('用户信息=', userinfo)
    this.useUser = userinfo;
    this.tel = userinfo.mt_mobile;
    /* if(this.isMTPhone == true){
      this.showBDTel = true
    }else {
      this.showBDTel = false
    } */
  },
  methods: {
    // 判断是否有手机号，并弹出手机号修改或绑定
    openPop(){
      if (this.tel){
        console.log('美团关联手机号=', this.tel)
        this.phonePop = true;
      } else {
        this.showBDTel = true;
      }
    },
    // 关闭弹窗
    closePop(){
      this.phonePop = false
      this.showBDTel = false
    },
    // 关闭弹窗
    close(){
      this.phonePop = false
      this.showBDTel = false
    },
    submitTel(type){
      let that = this
      if (!(/^1[0-9]{10}$/.test(that.tel + ""))) { // 使用正则表达式进行校验
        uni.showToast({title: "手机号格式不对，请重新输入", icon: "none", duration: 2000})
      } else {
        if (type === 0){
          that.$api.getBindMtPhoneAPI({
            mt_mobile: that.tel,
          }).then(res => {
            if (res.data.code === 200){
              uni.showToast({
                title: "修改成功",
                icon: 'none',
                duration: 400
              })
              setTimeout(() => {
                this.$emit('mt_mobile', that.tel)
                that.closePop()
                that.GetUserInfo()
              }, 1000)
            }
          }).catch(err => {
            uni.showToast({
              title: err.data.msg,
              icon: 'none',
              duration: 400
            })
          })
        }
        else {
          that.$api.getBindMtPhoneAPI({
            mt_mobile: that.tel,
          }).then(res => {
            if (res.data.code === 200){
              uni.showToast({
                title: "绑定成功",
                icon: 'none',
                duration: 400
              })
              setTimeout(() => {
                this.$emit('mt_mobile', that.tel)
                that.closePop()
                that.GetUserInfo()
              }, 1000)
            }
          }).catch(err => {
            uni.showToast({
              title: err.data.msg,
              icon: 'none',
              duration: 400
            })
          })
        }
      }
    },
    // 获取用户信息
    GetUserInfo() {
      let that = this
      that.$api.GetuserInfo({}).then(res => {
        that.userData = res.data.result
        that.tel = that.userInfo.mt_mobile
        uni.setStorageSync('userinfo', res.data.result)
      }).catch(err => {
      });
    },
  },
  watch: {
    isMTPhone: function (val) {
      console.log('是否显示弹窗=', val)
      this.showBDTel = val
    }
  }
}

</script>

<style scoped lang="scss">
.tel_content {
  height: 80rpx;
  line-height: 80rpx;
  margin-top: 10rpx;
  display: flex;


  .tel_text {
    flex: 1;
  }

  image {
    height: 32rpx;
    width: 32rpx;
  }

  text {
    margin: auto 0;
    font-size: 26rpx;
    color: #888888;
  }

  .edit {
    font-weight: normal;
    color: #888888;
    font-size: 26rpx;
  }

  .tel {
    color: #FE5414;
  }
}

.divcolor {
  color: #666666;
}

.wm_box {
  position: relative;
  width: 600rpx;
  background: #ffffff;
  border-radius: 32.5rpx;
  margin: -186rpx auto 0;
}

.content_boxs {
  box-sizing: border-box;
  position: relative;

  .know_t {
    font-size: 32rpx;
    color: #000;
    font-weight: bold;
    text-align: center;
    box-sizing: border-box;
    margin-top: 6rpx;
    padding: 20rpx;
    border-bottom: 1px solid #eee;
  }

  .desc_text {
    box-sizing: border-box;
    padding: 30rpx 30rpx 0;
    font-size: 30rpx;
    color: #AAAAAA;
    line-height: 56rpx;
    text-align: left;

    text {
      color: #F97632;
      text-align: left;
    }
  }

  .tip {
    color: #BFBFBF;
    font-size: 24rpx;
    line-height: 36rpx;
    margin: 0 30rpx;
  }

  .input_name {
    margin: 20rpx 30rpx;
  }

  .btns_box {
    width: 280rpx;
    height: 64rpx;
    background: linear-gradient(270deg, #FEB85A 0%, #FC754A 100%);
    border-radius: 50rpx;
    font-size: 28rpx;
    color: #fff;
    line-height: 64rpx;
    text-align: center;
  }

  .btns_con {
    display: flex;
    justify-content: flex-end;
    font-size: 26rpx;
    margin: 20rpx 30rpx 30rpx;

    button {
      margin-left: 30rpx;
      font-size: 24rpx;
    }

    .zbbm {
      border-radius: 200rpx;
      width: 176rpx;
      background-color: #FFFFFF;
      border: #DDDDDD 1rpx solid;
      color: #999999;
    }

    .submit {
      border-radius: 200rpx;
      width: 176rpx;
      background: linear-gradient(131deg, #FC754A 0%, #FC754A 0%, #FEB95A 100%);
      color: #FFFFFF;
    }
  }
}
/* 修改关联美团手机号css */
.tel_box {
  position: relative;
  width: 100%;
  background: #ffffff;
  border-radius: 20rpx;
  .tel_title {
    font-size: 32rpx;
    color: #000;
    font-weight: bold;
    text-align: center;
    box-sizing: border-box;
    margin-top: 6rpx;
    padding: 20rpx;
  }

  .desc_text {
    font-size: 24rpx;
    line-height: 40rpx;
    padding: 30rpx 30rpx 0;
  }

  .tip {
    color: #BFBFBF;
    font-size: 24rpx;
    line-height: 40rpx;
    margin: 0 30rpx;
  }

  .input_name {
    margin: 20rpx 30rpx;
    background: #F6F6F6;
  }

  .btns_box {
    width: 280rpx;
    height: 64rpx;
    background: linear-gradient(270deg, #FEB85A 0%, #FC754A 100%);
    border-radius: 50rpx;
    font-size: 28rpx;
    color: #fff;
    line-height: 64rpx;
    text-align: center;
  }

  .btns_con {
    display: flex;
    justify-content: space-between;
    font-size: 26rpx;
    margin: 20rpx 30rpx 30rpx;

    button {
      margin-left: 30rpx;
      font-size: 24rpx;
    }

    .zbbm {
      border-radius: 50rpx;
      width: 40%;
      background-color: #FFFFFF;
      border: #DDDDDD 1rpx solid;
      color: #999999;
    }
    .zbbm:after{
      border: none;
    }
    .submit {
      border-radius: 50rpx;
      width: 40%;
      background: linear-gradient(131deg, #FC754A 0%, #FC754A 0%, #FEB95A 100%);
      color: #FFFFFF;
    }
    .submit:after{
      border: none;
    }
  }
}
</style>
